<template>
  <div>
    <div class="index_wrap">
      <div class="index_top">
        <img :src="userObj.staffPhoto" alt="">
        <div>
          <div>{{ userObj.company }} <span>体验版</span></div>
          <div>{{ userObj.username }} | {{ userObj.company }}-{{ userObj.departmentName }}</div>
        </div>
      </div>
      <div class="count_wrap">
        <div class="count_item">
          <div>组织总人数</div>
          <CountTo
            :start-val="0"
            :end-val="homeData.employeeTotal"
            :duation="1000"
          />
        </div>
        <div class="count_item">
          <div>正式员工</div>
          <CountTo
            :start-val="0"
            :end-val="homeData.regularEmployeeTotal"
            :duation="1000"
          />
        </div>
        <div class="count_item">
          <div>合同待签署</div>
          <CountTo
            :start-val="0"
            :end-val="homeData.toBeConfirmed"
            :duation="1000"
          />
        </div>
        <div class="count_item">
          <div>待入职</div>
          <CountTo
            :start-val="0"
            :end-val="homeData.toBeEmployed"
            :duation="1000"
          />
        </div>
        <div class="count_item">
          <div>本月待转正</div>
          <CountTo
            :start-val="0"
            :end-val="homeData.toBeEmployed"
            :duation="1000"
          />
        </div>
        <div class="count_item">
          <div>本月待离职</div>
          <CountTo
            :start-val="0"
            :end-val="homeData.toBeDismissed"
            :duation="1000"
          />
        </div>
        <div class="count_item">
          <div>接口总访问</div>
          <CountTo
            :start-val="0"
            :end-val="homeData.interfaceAccessTotal"
            :duation="1000"
          />
        </div>

      </div>
    </div>
  </div></template>
<script>
import CountTo from 'vue-count-to'

import { mapGetters } from 'vuex'
export default {
  name: 'OAIndexCount',
  components: { CountTo },
  props: {
    homeData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters(['userObj']) // 辅助函数法
  },
  mounted() {

  },

  methods: {

  }
}
</script>
<style lang="scss">
.index_wrap{
  width: 1150px;
  height: 240px;
  background: white;
}
    .index_top{
      display: flex;
      height: 100px;
      align-items: center ;
      background: white;
      img{
        width: 50px;
        height: 50px;
        margin-right:10px ;
      }
      span{
        color:gray;
        background: #eee;
      }

    }
    .count_wrap{
        width: 1150px;
        display: flex;
        flex-wrap: wrap;
        .count_item{
          width: 260px;
          height: 90px;
          font-size: 25px;
          font-weight: bold;
          margin-left: 20px;
        }
      }
</style>
